<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/index.css">
  <link rel="stylesheet" href="/static/vander/swiper/swiper-bundle.min.css">
</head>
<body>
  <div class="container header">
    首 页
    <span>
      {{ if userInfo }}
      <div class="avatar">
        <img src="{{ userInfo.avatar }}">
        <p>{{ userInfo.nickname }}</p>
      </div>
      <ul class="options">
        <li><a href="/pages/info">个人中心</a></li>
        <li>注销登录</li>
      </ul>
      {{ else }}
      <a href="/pages/login">请登录</a>
      {{ /if }}
    </span>
  </div>

  <div class="nav container">
    <a href="/pages/goods">&lt;&lt; 商品列表</a></li>
    <a href="/pages/cart">
      <img class="" src="/public/images/004.webp" alt="" style="width: 60px; height: 60px;">
    </a>
  </div>

  <div class="banner swiper">
    <div class="swiper-wrapper">
      {{ each list }}
      <div class="item swiper-slide" style="background-image: url('http://localhost:8080{{ $value.img_url }}')">
        <a href="{{ $value.link }}" target="_blank" style="display: block;"></a>
      </div>
      {{ /each }}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script src="/static/vander/jquery/jquery.min.js"></script>
  <script src="/static/vander/swiper/swiper-bundle.min.js"></script>
  <script src="/static/js/index.js"></script>
</body>
</html>
